{% extends "base.html" %}

{% block content %}
<!-- 配速统计卡片 -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">关键点用时统计</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="stat-card">
                            <div class="stat-number">{{ pace_stats['10km Time'] }}</div>
                            <div class="stat-label">10公里平均用时</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-card">
                            <div class="stat-number">{{ pace_stats['Half Way Time'] }}</div>
                            <div class="stat-label">半程平均用时</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-card">
                            <div class="stat-number">{{ pace_stats['30km Time'] }}</div>
                            <div class="stat-label">30公里平均用时</div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="stat-card">
                            <div class="stat-number">{{ pace_stats['Net Time'] }}</div>
                            <div class="stat-label">完赛平均用时</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 图表展示 -->
<div class="row">
    <div class="col-md-6 mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">参赛组别分布</h5>
            </div>
            <div class="card-body">
                <div id="categoryChart"></div>
            </div>
        </div>
    </div>
    <div class="col-md-6 mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">参赛国家Top10</h5>
            </div>
            <div class="card-body">
                <div id="countryChart"></div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6 mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">完赛时间分布</h5>
            </div>
            <div class="card-body">
                <div id="timeChart"></div>
            </div>
        </div>
    </div>
    <div class="col-md-6 mb-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">平均配速变化</h5>
            </div>
            <div class="card-body">
                <div id="paceChart"></div>
            </div>
        </div>
    </div>
</div>

<script>
    var categoryGraphs = {{ category_chart | safe }};
    var countryGraphs = {{ country_chart | safe }};
    var timeGraphs = {{ time_chart | safe }};
    var paceGraphs = {{ pace_chart | safe }};
    
    Plotly.newPlot('categoryChart', categoryGraphs.data, categoryGraphs.layout);
    Plotly.newPlot('countryChart', countryGraphs.data, countryGraphs.layout);
    Plotly.newPlot('timeChart', timeGraphs.data, timeGraphs.layout);
    Plotly.newPlot('paceChart', paceGraphs.data, paceGraphs.layout);
</script>
{% endblock %}